<template>
    <div class="detailglobel">
        <div class="detailtop">
            <div class="image">
                <img :src="detail.cover" alt="">
            </div>
            <div class="rightcontent">
                <div class="title">{{ detail.title }} <n-button size="tiny"
                        :type="detail.isfava ? 'success' : 'info'">收藏</n-button> </div>
                <div class="buycount">[图文]{{ detail.sub_count }}人学过</div>
                <div class="price">￥{{ detail.price }} <span>￥{{ detail.t_price }}</span></div>
                <div> <n-popover placement="bottom" trigger="hover" @update:show="handleUpdateShow">
                        <template #trigger>
                            <n-button size="tiny">可用优惠券</n-button>
                        </template>
                        <div class="pover">
                            <h1>可用优惠券{{ yhjlist.length }}</h1>
                            <div :class="item.isgetcoupon == false ? 'yhjlist' : 'yhlist'" v-for="item in yhjlist">
                                <div class="pricename">￥{{ item.price }}</div>
                                <div class="syzl">适用专栏:{{ item.value.title }}</div>
                                <div class="syzl">有效期:{{ item.start_time }} -{{ item.end_time }}</div>
                                <div style="text-align: right;">
                                    <n-button type="primary" v-if="item.isgetcoupon == true">已领取</n-button>
                                    <n-button type="primary" v-if="item.isgetcoupon == false"
                                        @click="ljlq(item)">立即领取</n-button>
                                </div>
                            </div>
                        </div>

                    </n-popover></div>
                <div style="margin-top: 70px;">
                    <n-button type="primary" @click="ljxx()">立即学习</n-button>
                </div>
            </div>

        </div>
        <div class="detailbottom">
            <div class="leftb">
                <div>
                    <n-tabs type="line" :default-value="value" @update:value="changetab" animated>
                        <n-tab-pane name="course" tab="详情">

                        </n-tab-pane>
                        <n-tab-pane name="column" tab="目录">

                        </n-tab-pane>

                    </n-tabs>
                </div>
                <div v-if="value == 'course'" v-html="detail.try"></div>
                <div v-else>
                    <div class="mulist" v-for="item in detail.column_courses" @click="djcolu(item)">
                        <n-button size="tiny">{{ item.type == 'radio' ? '视频' : '图文' }}</n-button> {{ item.title }}
                        <n-button size="tiny" type="default" v-if="item.price == '0.00'">免费</n-button>
                    </div>
                </div>

            </div>
            <div class="righttb"> 
                <div class="ptitem" v-for="item in slist" @click="tzym(item.id)" style="margin-bottom: 20px;">
                    <div class="ptimg" style="margin-bottom: 0px;">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="ptinfo">
                        <div class="pttitle">{{ item.title }}</div>
                        <div class="price">￥{{ item.price }} <span>￥{{ item.t_price }}</span></div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>
<script setup>

import { NButton, NPopover, NTabs, NTabPane, createDiscreteApi } from "naive-ui";
import { useRoute } from "vue-router"
import { useRouter } from 'nuxt/app';
import { getCurrentInstance } from "vue";
const route = useRoute()
const value = ref("course");
let { ctx: that, proxy } = getCurrentInstance()
console.log(route.params)

const router = useRouter();
const detail = ref({});
const yhjlist = ref([]);
const slist = ref([]);
onMounted(() => {
    getdetail()
    gethot()
    getyhj()
})
const getyhj = async () => {
    const { data } = await useHttp("", "/coupon/list");
    console.log(data.value, "youhj")
    yhjlist.value = data.value;
    yhjlist.value.forEach(el => {
        el.start_time = format(el.start_time)
        el.end_time = format(el.end_time)
    })
}
const changetab = (e) => {
    console.log(e, "eee")
    // console.log(value.value)
    value.value = e

}
const tzym=(id)=>{
    router.push("/detail/"+id);
    
}
const djcolu = (item) => {
    const { message } = createDiscreteApi(['message'])
    if (item.price !== '0.00') {
        message.warning("请购买该专栏");
    }else{
        
  router.push("/mldetail/"+detail.value.id+'/'+item.id);
    }
}
const add0 = (m) => { return m < 10 ? '0' + m : m }
const format = (shijianchuo) => {
    //shijianchuo是整数，否则要parseInt转换
    var time = new Date(shijianchuo); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
}

const getdetail = async () => {
    const { data } = await useHttp("", `/column/read?id=${route.params.id}`);
    console.log(data.value)
    detail.value = data.value;
    console.log(detail.value.cover)
}
const gethot = async () => {
    const { data } = await useHttp("", `/hot`);
    console.log(data.value)
    slist.value = data.value
}
const ljlq = async (item) => {
    const { message } = createDiscreteApi(['message'])
    const { data, error } = await useHttp("", "/user_coupon/receive", {
        method: "post",
        body: {
            coupon_id: item.id
        }

    });
    if (data.value == undefined) {
        console.log("12333")
        message.warning(error.value.data.data);
    } else {
        message.success("领取成功");
        that.$forceUpdate();
        getyhj()
    }

}
const ljxx=()=>{
    router.push(`/createorder/${detail.value.id}/column`)
}
</script>
<style lang="css" scoped>
.pover {
    height: 200px;
    overflow: auto;
}

.syzl {
    color: #fff;
}

.pricename {
    color: #fff;
    font-weight: bold;
    font-size: 20px;

}

.mulist {
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    cursor: pointer;
}

.yhlist {
    width: 400px;
    height: 200px;
    margin-bottom: 15px;
    background: gray;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.yhjlist {
    width: 400px;
    height: 200px;
    margin-bottom: 15px;
    background: rgba(249, 115, 22, 1);
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.detailglobel {
    width: 100%;
    height: auto;
}

.righttb {
    width: 19%;

}

.detailtop {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    display: flex;
}

.image {
    width: 340px;
    height: 200px;
}

.rightcontent {
    width: calc(100% - 340px);
    padding-left: 20px;
    box-sizing: border-box;
}

.title {
    font-size: 20px;
    line-height: 28px;
}

.image img {
    width: 100%;
    border-radius: 10px;
    height: 100%;
}

.buycount {
    color: rgba(156, 163, 175, 1);
    font-size: 12px;
}

.price {
    font-size: 15px;
    font-weight: bold;
    color: rgba(244, 63, 94, 1);
}

.price span {
    color: rgba(107, 114, 128, 0.7);
    text-decoration-line: line-through;
    font-weight: normal;
    font-size: 12px;
}

.detailbottom {
    width: 100%;
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}

.leftb {
    width: 80%;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
}


.ptitem {
    width: 100%;
    height: auto;
    margin-right: 20px;
    border-radius: 10px;
    cursor: pointer;
}

.ptitem:nth-child(4n) {
    margin-right: 0px !important;
}

.ptinfo {
    background: #fff;
    padding: 20px 30px;
    box-sizing: border-box;
}

.cardimg {
    width: 100%;
}

.cardimg img {
    width: 100%;
    border-radius: 5px;
}

.ptimg {
    width: 100%;
    height: 200px;
}

.ptimg img {
    width: 100%;
    height: 200px;

}
</style>